<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils"%>
<%
	String rcPath = request.getContextPath() + "/remote/images";
	request.setAttribute("rcPath", rcPath);
	request.setAttribute("commonPath", request.getContextPath() + "/sites/weixin");
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="<%=request.getContextPath() %>/remote/js/rc_js.js"></script>
<script>
var fImgPath = "${rcPath}/full";
stbCtrl.paths.ctrlUrl = playCtrlUrl+"?userId=${EPG_USER_SESSION.userId}";
</script>
<style>
.rc_icon {
	width:17.3%;
}

.rc_btn_switch {
	width:17.3%;
	margin-bottom: 130%;
	margin-left:2%;
}

.rc_min_bg {
	width:85.3%;
	margin-bottom: 50%;
	margin-left:8%;
}

.rc_btn_vol_down {
	width:17.3%;
	margin-bottom: 27%;
	margin-left:2%;
}

.rc_btn_vol_up {
	width:17.3%;
	margin-bottom: 7%;
	margin-left:2%;
}

.rc_btn_small {
	width:43.3%;
	margin-bottom: 6%;
	margin-left:29%;
}

.rc_btn_stop {
	width:17.3%;
	margin-bottom: 27%;
	margin-left:81%;
}

.rc_btn_back {
	width:17.3%;
	margin-bottom: 7%;
	margin-left:81%;
}

.rc_btn_change {
	width:22.9%;
	margin-bottom: 31%;
	margin-left:39%;
}

#left-triangle {
	width:50px;
	height:50px;
	border-right: 90px solid transparent;
	border-top: 90px solid transparent;
	z-index:99999;
	margin-bottom: 82%;
	margin-left:13%;
}

#circle {
	width:90px;
	height:90px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 82%;
	margin-left:38%;
}

#right-triangle {
	width:90px;
	height:90px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 82%;
	margin-left:63%;
}

#up-triangle {
	width:90px;
	height:90px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 107%;
	margin-left:38%;
}

#down-triangle {
	width:90px;
	height:90px;
	border-right: 90px solid transparent;
	border-top: 90px solid transparent;
	z-index:99999;
	margin-bottom: 56%;
	margin-left:38%;
}

.rc_num_bg {
	width:85.3%;
	margin-bottom: 50%;
	margin-left:8%;
}

.num-triangle {
	width:65px;
	height:65px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	/* background-color: red; */
}

#num1-triangle {
	margin-bottom: 115%;
	margin-left:15%;
}

#num2-triangle {
	margin-bottom: 115%;
	margin-left:42%;
}

#num3-triangle {
	margin-bottom: 115%;
	margin-left:69%;
}

#num4-triangle {
	margin-bottom: 94%;
	margin-left:15%;
}

#num5-triangle {
	margin-bottom: 94%;
	margin-left:42%;
}

#num6-triangle {
	margin-bottom: 94%;
	margin-left:69%;
}

#num7-triangle {
	margin-bottom: 73%;
	margin-left:15%;
}

#num8-triangle {
	margin-bottom: 73%;
	margin-left:42%;
}

#num9-triangle {
	margin-bottom: 73%;
	margin-left:69%;
}

#num-back-triangle {
	margin-bottom: 53%;
	margin-left:15%;
}

#num0-triangle {
	margin-bottom: 53%;
	margin-left:42%;
}

#num-true-triangle {
	margin-bottom: 53%;
	margin-left:69%;
}
</style>

<!-- background -->
<div class="navbar-fixed-bottom" style="background-color: #181b1b;width:100%;height:100%;"></div>

<!-- 头部 -->
<div class="row navbar-fixed-top menu-row" style="background-color: #181b1b;">
	<div class="col-xs-2 menu-col" onclick="remoteCtrlDialog.close();">
		<img src="<%=request.getContextPath() %>/sites/weixin/images/wx_back.png" class="menu-col-back"/>
		<span>${EPG_USER_SESSION.stbType}</span>
	</div>
	<div id="remoteCtrlName" class="col-xs-8 menu-col" onclick="remoteCtrlDialog.close();">
		按钮遥控
	</div>
</div>

<!-- panel close- -->
<%-- <div class="navbar-fixed-bottom rc_btn_switch rc_icon">
	<img src="${rcPath}/full/btn-switch.png" width="100%" height="100%" onclick="rc.close();"/>
</div> --%>

<!-- panel up down left right ok btn -->
<div id="ctrl_layer">
	<div class="navbar-fixed-bottom rc_min_bg">
		<img id="rc-min-bg" src="${rcPath}/full/rc-min-bg.png" width="100%" height="100%"/>
	</div>
	
	<div id='left-triangle' class="navbar-fixed-bottom" 
		 onclick="imageObj.cPanelImg('rc-min-bg','left-triangle',fImgPath,'rc.left()');"></div>
	<div id="circle" class="navbar-fixed-bottom" 
		 onclick="imageObj.cPanelImg('rc-min-bg','circle',fImgPath,'rc.enter()');"></div>
	<div id="right-triangle" class="navbar-fixed-bottom" 
		 onclick="imageObj.cPanelImg('rc-min-bg','right-triangle',fImgPath,'rc.right()');"></div>
	<div id='up-triangle' class="navbar-fixed-bottom" 
		 onclick="imageObj.cPanelImg('rc-min-bg','up-triangle',fImgPath,'rc.up()');"></div>
	<div id="down-triangle" class="navbar-fixed-bottom" 
		 onclick="imageObj.cPanelImg('rc-min-bg','down-triangle',fImgPath,'rc.down()');"></div>
</div>

<div id="num_layer" style="display: none;">
	<div class="navbar-fixed-bottom rc_num_bg">
		<img id="rc-num-bg" src="${rcPath}/full/rc-num-bg.png" width="100%" height="100%"/>
	</div>
	<c:forEach begin="0" end="8" varStatus="i">
		<div id='num${i.index + 1}-triangle' class="navbar-fixed-bottom num-triangle" 
			 onclick="imageObj.cPanelImg('rc-num-bg','num${i.index + 1}-triangle',fImgPath,'rc.keyNum(${i.index + 1})');"></div>
	</c:forEach>
	<div id='num-back-triangle' class="navbar-fixed-bottom num-triangle" 
		 onclick="imageObj.cPanelImg('rc-num-bg','num-back-triangle',fImgPath,'rc.back()');"></div>
	<div id='num0-triangle' class="navbar-fixed-bottom num-triangle" 
		 onclick="imageObj.cPanelImg('rc-num-bg','num0-triangle',fImgPath,'rc.keyNum(0)');"></div>
	<div id='num-true-triangle' class="navbar-fixed-bottom num-triangle" 
		 onclick="imageObj.cPanelImg('rc-num-bg','num-true-triangle',fImgPath,'rc.enter()');"></div>
</div>

<!-- panel vol- -->
<div class="navbar-fixed-bottom rc_btn_vol_down">
	<img id="btn-vol-" src="${rcPath}/full/btn-vol-.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-',fImgPath,'rc.volDown()');"/>
</div>

<!-- panel vol+ -->
<div class="navbar-fixed-bottom rc_btn_vol_up">
	<img id="btn-vol-add" src="${rcPath}/btn-vol-add.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-add',fImgPath,'rc.volUp()');"/>
</div>

<!-- panel small -->
<div class="navbar-fixed-bottom rc_btn_small">
	<img src="${rcPath}/full/btn-small.png" width="100%" height="100%" onclick="remoteCtrlDialog.small();"/>
</div>

<!-- panel resume -->
<div class="navbar-fixed-bottom rc_btn_stop">
	<img id="btn-stop" src="${rcPath}/full/btn-stop.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-stop',fImgPath,'rc.resumeOrPause()');"/>
</div>

<!-- panel back -->
<div class="navbar-fixed-bottom rc_btn_back">
	<img id="btn-return" src="${rcPath}/full/btn-return.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-return',fImgPath,'rc.back()');"/>
</div>

<!--  -->
<div class="navbar-fixed-bottom rc_btn_change">
	<img id="rc_change" src="${rcPath}/full/change.png" width="100%" height="100%" 
		 onclick="remoteCtrlDialog.change();"/>
</div>
